<template>
	<a-form :ref="'ruleForm'" :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
		<a-row :gutter="[10, 10]">
			<a-col :span="24">
				<a-form-item label="名称字段" name="nameField">
					<a-select
						style="width: 100%"
						placeholder="请选择用户信息字段"
						v-model="formState.data.name.field"
						optionLabelProp="label"
						show-search
						:filter-option="(input, option) => option.label.toLowerCase().includes(input.toLowerCase())"
						@change="handleNameFieldChange"
					>
						<a-select-option
							v-for="optionItem in getUserInfoFieldOptions()"
							:value="optionItem.value"
							:key="optionItem.value"
							:label="optionItem.label"
						>
							<span>{{ optionItem.label }}</span>
							<span style="color: #999; margin-left: 8px">({{ optionItem.category }})</span>
						</a-select-option>
					</a-select>
				</a-form-item>
			</a-col>
			<a-col :span="24">
				<a-form-item label="角色字段" name="roleField">
					<a-select
						style="width: 100%"
						placeholder="请选择用户信息字段"
						v-model="formState.data.role.field"
						optionLabelProp="label"
						show-search
						:filter-option="(input, option) => option.label.toLowerCase().includes(input.toLowerCase())"
						@change="handleRoleFieldChange"
					>
						<a-select-option
							v-for="optionItem in getUserInfoFieldOptions()"
							:value="optionItem.value"
							:key="optionItem.value"
							:label="optionItem.label"
						>
							<span>{{ optionItem.label }}</span>
							<span style="color: #999; margin-left: 8px">({{ optionItem.category }})</span>
						</a-select-option>
					</a-select>
				</a-form-item>
			</a-col>
		</a-row>
	</a-form>
</template>

<script setup>
	import { ref, watch, reactive, defineProps, defineEmits } from 'vue'
	import tool from '@/utils/tool'
	import config from '../config'
	import { cloneDeep } from 'lodash-es'
	const emits = defineEmits(['upDataConfig'])
	const props = defineProps({
		config: {
			type: Object,
			default: () => {
				return cloneDeep(config)
			}
		}
	})

	// 创建本地配置缓存，用于存储用户修改但尚未确认的配置
	const localConfig = reactive(cloneDeep(props.config))

	// 使用标记位避免循环更新
	const isUpdatingFromProps = ref(false)

	// 表单状态使用本地配置，确保正确初始化
	const formState = reactive({
		data: {
			name: {
				field: localConfig.data.name?.field || 'name',
				value: localConfig.data.name?.value || '',
				alias: localConfig.data.name?.alias || ''
			},
			role: {
				field: localConfig.data.role?.field || 'orgName',
				value: localConfig.data.role?.value || '',
				alias: localConfig.data.role?.alias || ''
			},
			avatar: {
				field: localConfig.data.avatar?.field || 'avatar',
				value: localConfig.data.avatar?.value || '',
				alias: localConfig.data.avatar?.alias || ''
			}
		}
	})

	// 确保初始状态同步

	// 用户信息字段选项列表
	const userInfoFieldOptions = [
		// 基本信息
		{ label: '用户ID', value: 'id', category: '基本信息' },
		{ label: '姓名', value: 'name', category: '基本信息' },
		{ label: '昵称', value: 'nickname', category: '基本信息' },
		{ label: '账号', value: 'account', category: '基本信息' },
		{ label: '性别', value: 'gender', category: '基本信息' },
		{ label: '年龄', value: 'age', category: '基本信息' },
		{ label: '出生日期', value: 'birthday', category: '基本信息' },
		{ label: '员工编号', value: 'empNo', category: '基本信息' },
		{ label: '入职日期', value: 'entryDate', category: '基本信息' },

		// 联系方式
		{ label: '手机号码', value: 'phone', category: '联系方式' },
		{ label: '邮箱地址', value: 'email', category: '联系方式' },
		{ label: '家庭电话', value: 'homeTel', category: '联系方式' },
		{ label: '办公电话', value: 'officeTel', category: '联系方式' },
		{ label: '紧急联系人', value: 'emergencyContact', category: '联系方式' },
		{ label: '紧急联系人电话', value: 'emergencyPhone', category: '联系方式' },

		// 组织信息
		{ label: '组织名称', value: 'orgName', category: '组织信息' },
		{ label: '职位名称', value: 'positionName', category: '组织信息' },
		{ label: '职级', value: 'positionLevel', category: '组织信息' },
		{ label: '组织ID', value: 'orgId', category: '组织信息' },
		{ label: '职位ID', value: 'positionId', category: '组织信息' },
		{ label: '主管ID', value: 'directorId', category: '组织信息' },

		// 头像信息
		{ label: '头像', value: 'avatar', category: '头像信息' },
		{ label: '签名', value: 'signature', category: '头像信息' },

		// 地址信息
		{ label: '家庭住址', value: 'homeAddress', category: '地址信息' },
		{ label: '通信地址', value: 'mailingAddress', category: '地址信息' },
		{ label: '紧急联系人地址', value: 'emergencyAddress', category: '地址信息' },

		// 身份信息
		{ label: '民族', value: 'nation', category: '身份信息' },
		{ label: '籍贯', value: 'nativePlace', category: '身份信息' },
		{ label: '证件类型', value: 'idCardType', category: '身份信息' },
		{ label: '证件号码', value: 'idCardNumber', category: '身份信息' },
		{ label: '文化程度', value: 'cultureLevel', category: '身份信息' },
		{ label: '政治面貌', value: 'politicalOutlook', category: '身份信息' },

		// 教育信息
		{ label: '毕业院校', value: 'college', category: '教育信息' },
		{ label: '学历', value: 'education', category: '教育信息' },
		{ label: '学制', value: 'eduLength', category: '教育信息' },
		{ label: '学位', value: 'degree', category: '教育信息' },

		// 登录信息
		{ label: '上次登录IP', value: 'lastLoginIp', category: '登录信息' },
		{ label: '上次登录地点', value: 'lastLoginAddress', category: '登录信息' },
		{ label: '上次登录时间', value: 'lastLoginTime', category: '登录信息' },
		{ label: '上次登录设备', value: 'lastLoginDevice', category: '登录信息' },
		{ label: '最新登录IP', value: 'latestLoginIp', category: '登录信息' },
		{ label: '最新登录地点', value: 'latestLoginAddress', category: '登录信息' },
		{ label: '最新登录时间', value: 'latestLoginTime', category: '登录信息' },
		{ label: '最新登录设备', value: 'latestLoginDevice', category: '登录信息' },

		// 其他信息
		{ label: '用户状态', value: 'userStatus', category: '其他信息' },
		{ label: '排序码', value: 'sortCode', category: '其他信息' },
		{ label: '扩展信息', value: 'extJson', category: '其他信息' }
	]

	// 获取用户信息字段选项
	const getUserInfoFieldOptions = () => {
		try {
			// 从localStorage获取用户信息
			const userInfo = tool.data.get('USER_INFO')
			if (!userInfo || typeof userInfo !== 'object') {
				console.warn('USER_INFO not found in localStorage or invalid format')
				return []
			}

			// 过滤出用户信息中实际存在的字段
			const availableFields = userInfoFieldOptions.filter((option) => {
				return (
					Object.prototype.hasOwnProperty.call(userInfo, option.value) &&
					userInfo[option.value] !== null &&
					userInfo[option.value] !== undefined
				)
			})

			// 如果没有可用字段，返回所有预定义字段作为fallback
			return availableFields.length > 0 ? availableFields : userInfoFieldOptions
		} catch (error) {
			console.error('Error getting user info fields:', error)
			// 出错时返回所有预定义字段作为fallback
			return userInfoFieldOptions
		}
	}

	// 防抖定时器
	const updateDebounceTimer = ref(null)

	// 统一的更新函数
	const triggerUpdate = () => {
		// 如果正在从 props 更新，则不触发更新
		if (isUpdatingFromProps.value) {
			return
		}

		// 清除之前的定时器
		if (updateDebounceTimer.value) {
			clearTimeout(updateDebounceTimer.value)
		}

		// 设置新的定时器，延迟执行更新
		updateDebounceTimer.value = setTimeout(() => {
			// 更新本地配置
			Object.assign(localConfig, {
				data: formState.data
			})
			// 更新预览配置（这会立即反映在预览区域）
			emits('upDataConfig', cloneDeep(localConfig))
		}, 300) // 300ms的防抖时间
	}

	// @change事件处理器
	const handleNameFieldChange = (value) => {
		formState.data.name.field = value
		triggerUpdate()
	}

	const handleRoleFieldChange = (value) => {
		formState.data.role.field = value
		triggerUpdate()
	}

	// 监听具体字段变化（保留作为备用）
	watch(() => [formState.data.name.field, formState.data.role.field], triggerUpdate, { deep: true, immediate: false })

	// 监听props.config的变化，更新本地配置
	watch(
		() => props.config,
		(newConfig) => {
			if (newConfig && !isUpdatingFromProps.value) {
				// 设置标记位，表示正在从 props 更新
				isUpdatingFromProps.value = true

				// 更新本地配置
				Object.assign(localConfig, cloneDeep(newConfig))

				// 更新表单状态，确保正确映射
				Object.assign(formState.data, {
					name: {
						field: newConfig.data.name?.field || 'name',
						value: newConfig.data.name?.value || '',
						alias: newConfig.data.name?.alias || ''
					},
					role: {
						field: newConfig.data.role?.field || 'orgName',
						value: newConfig.data.role?.value || '',
						alias: newConfig.data.role?.alias || ''
					},
					avatar: {
						field: newConfig.data.avatar?.field || 'avatar',
						value: newConfig.data.avatar?.value || '',
						alias: newConfig.data.avatar?.alias || ''
					}
				})

				// 重置标记位
				setTimeout(() => {
					isUpdatingFromProps.value = false
				}, 0)
			}
		},
		{ deep: true }
	)
</script>
<style scoped>
	:deep(.ant-radio-button-wrapper) {
		padding: 0px;
		width: 100%;
	}
	:deep(.ant-radio-group) {
		display: flex;
		text-align: center;
	}
	:deep(.form-item) {
		margin-bottom: 0px;
	}
</style>
